<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>图片列表：鼠标移入/移出改变图片透明度</title>
	<style>
		ul,
		li {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		
		#imgList {
			width: 700px;
			overflow: hidden;
			border: 1px solid #333;
			margin: 0 auto;
			padding: 0 0 10px 10px;
		}
		
		#imgList li {
			float: left;
			width: 128px;
			height: 128px;
			border: 1px solid #ccc;
			margin: 10px 10px 0 0;
		}
		
		#imgList li img {
			opacity: 0.3;
			cursor: crosshair;
		}
		
		#imgList li.current img {
			opacity: 1;
		}
	</style>
	
</head>

<body>
	<ul id="imgList">
		<li><img src="img/1.jpg" /></li>
		<li><img src="img/2.jpg" /></li>
		<li><img src="img/3.jpg" /></li>
		<li><img src="img/4.jpg" /></li>
		<li><img src="img/5.jpg" /></li>
		<li><img src="img/6.jpg" /></li>
		<li><img src="img/7.jpg" /></li>
		<li><img src="img/8.jpg" /></li>
		<li><img src="img/9.jpg" /></li>
		<li><img src="img/10.jpg" /></li>
	</ul>
	
<script>
window.onload = function() {
	var oLi = document.getElementsByTagName("li");
	for(var i = 0; i < oLi.length; i++) {
		
		oLi[i].onmouseover = function() {
			this.className = "current"
		};
		
		oLi[i].onmouseleave = function() {
			this.className = ""
		}
	}
}
</script>
</body>
</html>